<script setup lang="tsx">
import { AddIcon } from 'tdesign-icons-vue-next';
import { Link, MessagePlugin, Space } from 'tdesign-vue-next';
import { ref } from 'vue';
import { useI18n } from 'vue-i18n';

import { add, Delete, edit, getInfo, getPayList } from '@/api/system/pay';
import { formGroup } from '@/components/formDialog/FormDialog';
import FormDialogGroup from '@/components/formDialog/FormDialogGroup.vue';
import MyTable from '@/components/myTable/index.vue';
import OperatingBox from '@/components/operatingBox/index.vue';

const { t } = useI18n();
const data = ref([]);
const columns = [
  {
    title: '支付方式',
    colKey: 'payMethod',
  },
  {
    title: '商户号',
    colKey: 'wkpayMchId',
  },
  {
    title: '代收地址',
    colKey: 'hipayOrderUrl',
  },
  {
    title: '代付地址',
    colKey: 'hipayWithdrawUrl',
  },
  {
    title: '操作',
    colKey: 'op',
  },
];

const pagination = ref({
  defaultCurrent: 1,
  defaultPageSize: 10,
  total: 0,
});

const render = () => (
  <>
    <OperatingBox>
      <t-button icon={() => <AddIcon />} onClick={() => unAdd()}>
        新增
      </t-button>
    </OperatingBox>
    <MyTable
      columns={columns}
      data={data.value}
      v-model:pagination={pagination.value}
      rowKey="id"
      onUnGetList={unGetList}
    >
      {{
        op: (slotProps: any) => (
          <Space>
            <Link theme="primary" onClick={() => unEdit(slotProps)}>
              修改
            </Link>
            <Link theme="danger" onClick={() => deleteClickOp(slotProps, false)}>
              {t('pages.detailCard.detail.form.delete')}
            </Link>
          </Space>
        ),
      }}
    </MyTable>
  </>
);

const unGetList = async () => {
  try {
    const res = await getPayList({
      pageNum: pagination.value.defaultCurrent,
      pageSize: pagination.value.defaultPageSize,
    });
    data.value = res.rows;
    pagination.value = {
      ...pagination.value,
      total: res.total,
    };
  } catch (e) {
    console.log(e);
  }
};

unGetList();
/** 添加对话框 */
const formObj = new formGroup();
const unAdd = async () => {
  try {
    formObj.show('添加支付', {}, '添加支付');
  } catch (e) {
    console.error(e);
    MessagePlugin.error(e);
  }
};

formObj.add<any>(
  '添加支付',
  '添加支付',
  {},
  async (body) => {
    await add(body.data);
    unGetList();
  },
  {
    // safeCode: [{ required: true, message: '安全码不能为空', trigger: 'blur' }],
  },
  '26%',
);

// 详情
const unEdit = async (slotProps: any) => {
  try {
    const res = await getInfo(slotProps.row.id);
    res.data.safeCode = undefined;
    formObj.show(
      '编辑支付',
      {
        ...res.data,
      },
      '编辑支付',
    );
  } catch (e) {
    console.error(e);
    MessagePlugin.error(e);
  }
};

formObj.add<any>(
  '编辑支付',
  '编辑支付',
  {},
  async (body) => {
    await edit(body.data);
    unGetList();
  },
  {
    // safeCode: [{ required: true, message: '安全码不能为空', trigger: 'blur' }],
  },
  '26%',
);

// 删除
const confirmVisible = ref(false);
const deleteId = ref([]);
const onConfirmDelete = () => {
  const ids = deleteId.value.join(',');
  Delete(ids).then(() => {
    confirmVisible.value = false;
    MessagePlugin.success('删除成功');
    unGetList();
  });
};

const deleteClickOp = (value: any, isSingle: boolean) => {
  if (isSingle && !value.length) {
    MessagePlugin.warning('请先勾选数据');
    return;
  }
  confirmVisible.value = true;
  deleteId.value = isSingle ? value : [value.row.id];
};
</script>

<template>
  <div>
    <render />
    <form-dialog-group :form-obj="formObj">
      <template #default="{ formData, item }">
        <!-- 添加支付对话框 -->
        <template v-if="item == '添加支付' || item == '编辑支付'">
          <t-form-item label="支付方式" name="payMethod" help="例: bestpay支付">
            <t-input v-model="formData.payMethod" :style="{ width: '480px' }" placeholder="请输入支付方式" />
          </t-form-item>
          <t-form-item label="商户号" name="wkpayMchId">
            <t-input v-model="formData.wkpayMchId" :style="{ width: '480px' }" placeholder="请输入商户号" />
          </t-form-item>
          <t-form-item label="平台公钥" name="bestpayMchPubKey">
            <t-textarea v-model="formData.bestpayMchPubKey" :style="{ width: '480px' }" placeholder="请输入平台公钥, 无则不填" />
          </t-form-item>
          <t-form-item label="商户私钥" name="wkpayMchKey">
            <t-textarea v-model="formData.wkpayMchKey" :style="{ width: '480px' }" placeholder="请输入商户私钥" />
          </t-form-item>
          <t-form-item label="代收地址" name="hipayOrderUrl">
            <t-input v-model="formData.hipayOrderUrl" :style="{ width: '480px' }" placeholder="请输入代收地址" />
          </t-form-item>
          <t-form-item label="代付地址" name="hipayWithdrawUrl">
            <t-input v-model="formData.hipayWithdrawUrl" :style="{ width: '480px' }" placeholder="请输入代付地址" />
          </t-form-item>
          <!-- <t-form-item label="安全码" name="safeCode">
            <t-input
              v-model="formData.safeCode"
              type="password"
              :style="{ width: '480px' }"
              placeholder="请输入安全码"
            />
          </t-form-item> -->
        </template>
      </template>
    </form-dialog-group>
    <t-dialog v-model:visible="confirmVisible" header="确认删除当前所选项目？" body="删除后，数据将被清空，且无法恢复"
      @confirm="onConfirmDelete" />
  </div>
</template>
